<template>
    <div class="sidebar">
        <div class="logo"> 
           <!-- <img src="" alt="">  -->
            HOME FOR SMEs
        </div> 
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :router="true"    
            :collapse="isCollapse"
        >

            <el-menu-item index="/admin">
                <i class="el-icon-house"></i>
                <span slot="title">首页</span>
            </el-menu-item>

            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-folder-checked"></i>
                    <span>项目管理</span>
                </template>
                <el-menu-item index="/teachers/index">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
                <el-submenu index="1-4">
                    <template slot="title">选项4</template>
                    <el-menu-item index="1-4-1">选项1</el-menu-item>
                </el-submenu>
            </el-submenu>

            <el-menu-item index="3">
                <i class="el-icon-document"></i>
                <span slot="title">教师资源库</span>
            </el-menu-item>
            <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">酒店资源库</span>
            </el-menu-item>
            <el-menu-item index="5">
                <i class="el-icon-notebook-1"></i>
                <span slot="title">附件资源库</span>
            </el-menu-item>
            <el-menu-item index="6">
                <i class="el-icon-user"></i>
                <span slot="title">用户管理</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name: 'sideBar',
        data() {
            return {
                isCollapse: false
            }
        },
        methods: {

            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },

            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style scoped lang="less" >
    .sidebar {
        .logo {
            height: 130px;
            display: flex;
            color: #333;
            font-weight: bold;
            font-size: 17px;
            justify-content: center;
            align-items: center;
        }
    }
</style>
